cursor
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Част. |
Коротка інформація
|
CSS |
CSS2,
CSS2.1 |
|
Значення
за умовчанням |
auto |
|
Наслідує |
Так |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/ui.html#cursor - props |
Опис
Встановлює
форму курсора, коли він знаходиться в межах елементу. Вид курсора залежить від
операційної системи і встановлених параметрів.
Перш ніж
скористатися можливістю переробити вид курсора, вирішите, а чи буде він
використовуватися до місця. Багатьох користувачів подібні зміни можуть ввести в
оману, коли, наприклад, замість традиційної руки, що з'являється при наведенні
на посилання, виникає щось інше. У більшості випадків, краще залишити усе як є.
Синтаксис
cursor:
[url('шлях до курсора')] | [ auto | crosshair | default | e - resize | help |
move | n - resize | ne - resize | nw - resize | pointer | progress | s - resize
| se - resize | sw - resize | text | w - resize | wait | inherit ]
Значення
url Дозволяє
встановити свій власний курсор, для цього треба вказати шлях до файлу, в якому
вказана форма курсора, у форматі CUR або ANI.
auto Вид курсора
за умовчанням для поточного елементу.
inherit Наслідує значення батька.
Інші
допустимі значення приведені в таблицю. 1.
|
Таблиця. 1. Вид курсора |
|||
|
Вид |
Значення |
Тест |
Приклад |
|
|
default |
|
P {cursor:
default} |
|
|
crosshair |
|
P {cursor:
crosshair} |
|
|
help |
|
P {cursor:
help} |
|
|
move |
|
P {cursor:
move} |
|
|
pointer |
|
P {cursor:
pointer} |
|
|
progress |
|
P {cursor:
progress} |
|
|
text |
|
P {cursor:
text} |
|
|
wait |
|
P {cursor:
wait} |
|
|
n - resize |
|
P {cursor:
n - resize} |
|
|
ne -
resize |
|
P {cursor:
ne - resize} |
|
|
e - resize |
|
P {cursor:
e - resize} |
|
|
se -
resize |
|
P {cursor:
se - resize} |
|
|
s - resize |
|
P {cursor:
s - resize} |
|
|
sw -
resize |
|
P {cursor:
sw - resize} |
|
|
w - resize |
|
P {cursor:
w - resize} |
|
|
nw -
resize |
|
P {cursor:
nw - resize} |
Залежно від операційної
системи і її налаштувань вид курсора може відрізнятися від приведених в
таблиці.
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>cursor</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>
<p class="cross">На цьому
тексті курсор миші прикмет вид перехрестя.</p>
<p>
<a href="help 1.htm"
class="help">ДОВІДКА 1</a><br>
<a href="help 2.htm"
class="help">ДОВІДКА 2</a><br>
<a href="help 3.htm"
class="help">ДОВІДКА 3</a>
</p>
</body>
</html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості cursor
Об'єктна модель
[window.]document.getElementById("elementID").style.cursor
Браузери
Деякі
браузери підтримують додаткові форми курсорів. Наприклад, Internet Explorer і
Opera працює зі значенням hand, яке є аналогом значення pointer. Крім того, у
браузерах IE, Safari і Firefox діятимуть наступні значення: all - scroll, col -
resize, no - drop, not - allowed, row - resize, vertical - text. Врахуйте, що
вказані значення не входять в специфікацію CSS2.1, але відповідають
специфікації CSS3 (окрім hand).
Браузер
Safari до версії 3.1, Opera до версії 9.6 включно, Firefox до версії 3.0
включно і Netscape 9 не підтримують значення url.